<template>
	<view>
		<view class="contaier" style="background-color: #FFFFFF;">
			<view class="top_bg">
				<view class="one_box">
					<!-- 第二名 -->
					<view class="top3">
						<view class="num_two">
							<image class="huangguan2" src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/rank/two.png"></image>
							<image class="top3_head" :src="SecondPerson.img"></image>
							<!-- <view class="top_name">{{twoName}}</view> -->
							<view class="top_name">{{ SecondPerson.name }}</view>
							<view class="top_sy">{{ SecondPerson.score }}分钟</view>
						</view>
					</view>

					<!-- 第一名 -->
					<view class="top3">
						<view class="num_one">
							<image class="huangguan1" src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/rank/one.png"></image>
							<image class="top3_head" :src="firstPerson.img"></image>
							<!-- <view class="top_name" style="font-size: 30rpx;">{{oneName}}</view> -->
							<view class="top_name text-bold" style="font-size: 30rpx;">{{ firstPerson.name }}</view>
							<view class="top_sy">{{ firstPerson.score }}分钟</view>
						</view>
					</view>

					<!-- 第三名 -->
					<view class="top3">
						<view class="num_three">
							<image class="huangguan2" src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/rank/three.png"></image>
							<image class="top3_head" :src="thirdPerson.img"></image>
							<view class="top_name">{{ thirdPerson.name }}</view>
							<view class="top_sy">{{ thirdPerson.score }}分钟</view>
						</view>
					</view>
				</view>

				<view class="number_sy_box">
					<view class="number_sy_box_title">
						<text>我的信息</text>
						<text style="position: absolute; right: 20rpx;z-index: 9999; font-size: 24rpx;color: #c3c3c3;">截止：{{ nowTime }}</text>
					</view>
					<view class="number_sy_main">
						<view style="width: 50%; text-align: center; border-right: 1px solid #eee;">
							<view class="number_num1">{{ myMsg.score }}分钟</view>
							<view class="danwei">学习时长</view>
						</view>
						<view style="width: 50%; text-align: center; z-index: 9999;">
							<view class="number_num2">{{ myMsg.rankid }}</view>
							<view class="danwei">排名</view>
						</view>

						<image mode="widthFix" class="xiaoding_bg" src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/rank/Intersect.png"></image>
					</view>
				</view>
			</view>

			<view class="rankList_box">
				<view class="rankItem" v-for="(item, index) in rankList" :key="index">
					<view class="rankIndex">
						<text>{{ index + 4 }}</text>
					</view>
					<view class="HeardBox"><image class="rankHeard" :src="item.headimgurl"></image></view>

					<view class="NameBox">
						<view class="userName text-bold">{{ item.name }}</view>
						<view class="color_ccc">
							<text class="text-blue">{{ item.salary }}</text>
							分钟
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			myMsg: {
				score: 0,
				rankid: 99999
			},
			nowTime: '',
			firstPerson: {
				name: '用户1',
				score: 0,
				img: 'http://cdn.zhoukaiwen.com/head4.jpg'
			},
			SecondPerson: {
				name: '用户2',
				score: 0,
				img: 'http://cdn.zhoukaiwen.com/head4.jpg'
			},
			thirdPerson: {
				name: '用户3',
				score: 0,
				img: 'http://cdn.zhoukaiwen.com/head4.jpg'
			},
			rankList: [
				// {
				// 	headimgurl: 'http://cdn.zhoukaiwen.com/head4.jpg',
				// 	name: '张 *',
				// 	salary: '17500'
				// }
			]
		};
	},
	onPullDownRefresh() {
		console.log('refresh');
		this.init();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	},
	methods: {
		getTime: function() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = '0' + month) : '';
			day >= 0 && day <= 9 ? (day = '0' + day) : '';
			var timer = year + '-' + month + '-' + day + ' ' + hour + ':00';
			this.nowTime = timer;
			console.log(this.nowTime);
		},
		init() {
			uni.$u.http
				.get('/app/activity/studyTimeRank')
				.then(res => {
					console.log(res.data);
					(this.firstPerson = {
						name: res.data.oneName,
						score: res.data.oneTime,
						img: res.data.oneUrl
					}),
						(this.SecondPerson = {
							name: res.data.twoName,
							score: res.data.twoTime,
							img: res.data.twoUrl
						}),
						(this.thirdPerson = {
							name: res.data.threeName,
							score: res.data.threeTime,
							img: res.data.threeUrl
						});
					this.myMsg = {
						score: res.data.myTime,
						rankid: res.data.myRankId
					};
					console.log(res.data.rankList);
					// let newArray = [];//定义一个新的数组，才存放传过来的对象
					res.data.rankList.forEach(item => {
						let newArrayList = {
							headimgurl: item.images,
							name: item.userName,
							salary: item.studyTime
						};
						this.rankList.push(newArrayList);
					});
				})
				.catch(() => {});
		}
	},
	onLoad() {
		this.init();
		this.getTime();
	}
};
</script>

<style lang="scss">
.top_bg {
	width: 750rpx;
	height: 650rpx;
	background: url(http://cdn.zhoukaiwen.com/rank_bg.png) no-repeat;
	background-size: 750rpx;
	position: relative;
}

.one_box {
	width: 750rpx;
	height: 260rpx;
	position: absolute;
	left: 0;
	bottom: 110rpx;
	display: flex;
	justify-content: space-around;
}

.one_box .top3 {
	width: 210rpx;
	height: 280rpx;
}

.top_name {
	width: 100%;
	height: 55rpx;
	line-height: 60rpx;
	color: #f2f2f2;
	font-size: 26rpx;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top_sy {
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top_sy span {
	font-size: 20rpx !important;
}

.num_one {
	position: relative;
}

.huangguan1 {
	width: 60px;
	height: 60px;
	position: absolute;
	right: -10rpx;
	top: -18 * 2rpx;
}

.num_one .top3_head {
	width: 150rpx;
	height: 150rpx;
	border-radius: 100%;
	margin: 15rpx 0 0 30rpx;
	border: 4rpx solid #ffdd3c;
}

.num_two {
	position: relative;
}

.huangguan2 {
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	right: 15rpx;
}

.num_two .top3_head {
	width: 120rpx;
	height: 120rpx;
	border-radius: 100%;
	margin: 45rpx 0 0 45rpx;
	border: 4rpx solid #bcdcdf;
}

.num_three {
	position: relative;
}

.huangguan2 {
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	right: 15rpx;
}

.num_three .top3_head {
	width: 120rpx;
	height: 120rpx;
	border-radius: 100%;
	margin: 45rpx 0 0 45rpx;
	border: 4rpx solid #e29d85;
}

// 第二块
.number_sy_box {
	width: 88%;
	height: 160rpx;
	background-color: #ffffff;
	position: absolute;
	left: 25rpx;
	border-radius: 20rpx;
	bottom: -115rpx;
	z-index: 999;
	padding: 22rpx;
	box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.1);
}

.number_sy_box_title {
	color: #888888;
	// font-weight: 500;
	font-size: 28rpx;
	display: flex;
	z-index: 9999;
	justify-content: space-between;
}

.number_sy_main {
	width: 100%;
	height: 124rpx;
	// padding-top: 20rpx;
	line-height: 52rpx;
	// background: red;
	display: flex;
	justify-content: space-around;
	position: relative;
}

.xiaoding_bg {
	position: absolute;
	right: -22rpx;
	bottom: -10rpx;
	width: 180rpx;
}

.number_num1 {
	font-size: 40rpx;
	font-weight: 500;
	color: #2fc04f;
}

.number_num2 {
	font-size: 40rpx;
	font-weight: 500;
	color: #4bac7f;
}

.danwei {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 26rpx;
	color: #c9c9c9;
}

// 列表
.rankList_box {
	min-height: 200rpx;
	margin-top: 130rpx;
}

.rankItem:last-child {
	border: none;
}

.rankItem {
	width: 700rpx;
	height: 140rpx;
	margin: 0px auto;
	border-bottom: 1px solid #e9e9e9;
}

.rankIndex {
	width: 60rpx;
	height: 140rpx;
	line-height: 140rpx;
	text-align: center;
	color: #cccccc;
	font-size: 40rpx;
	float: left;
}

.HeardBox {
	width: 100rpx;
	height: 100rpx;
	margin: 20rpx;
	border-radius: 100%;
	overflow: hidden;
	float: left;
	margin-right: 25rpx;
	margin-left: 10rpx !important;
}

.HeardBox image {
	width: 100%;
	height: 100%;
}

.NameBox {
	width: 480rpx;
	height: 140rpx;
	float: left;
	padding-top: 10rpx;
	box-sizing: border-box;
	// padding-right: 50rpx;
}

.NameBox view {
	height: 50rpx;
	line-height: 140rpx;
}

.userName {
	min-width: 90rpx;
	font-size: 30rpx;
	float: left;
	// margin-right: 110rpx;
}

.color_ccc{
	width: 100rpx;
	float: right;
}
</style>
